<script setup>
import MetaCode from "@/components/MetaCode.vue";
import {renderTemplate} from '@/utils/tool.js'
import {defaultData, defaultSample} from '@/utils/data.js'
import Meta3Part from "@/components/Meta3Part.vue";

// prop
const {sample, language, data} = defineProps({
  language: {type: String, default: 'sql'},
  sample: {type: String, default: defaultSample},
  data: {type: Object, default: defaultData},
})

// 样例、模板、渲染结果选项
const value = defineModel()
const result = computed(() => renderTemplate(value.value, data))
</script>

<template>
  <meta3-part>
    <template v-slot:header>
      <MetaCode :value="sample" language="javascript" :class="['is-disabled', 'codemirror-opacity']"/>
      <div class="hint">
        <el-link href="https://goofychris.github.io/art-template/zh-cn/docs/imports.html" target="_blank" style="margin-right: 10px">art</el-link>
        <el-link href="https://dayjs.fenxianglu.cn/category" target="_blank" style="margin-right: 10px">dayjs</el-link>
        <el-link href="https://www.lodashjs.com" target="_blank" style="margin-right: 10px">lodash</el-link>
        样例
      </div>
    </template>

    <template v-slot:main>
      <MetaCode v-model:value="value" :language :options="{readOnly: false, styleActiveLine: true}"/>
      <div class="hint">编辑</div>
    </template>

    <template v-slot:right>
      <MetaCode :value="result" :language :class="['is-disabled', 'codemirror-opacity']"/>
      <div class="hint">预览</div>
    </template>
  </meta3-part>
</template>

<style scoped lang="scss">
.hint {
  font-size: 22px;
  color: pink;

  position: absolute;
  bottom: 10px;
  right: 10px;
}

.codemirror-opacity {
  opacity: 0.8;
}
</style>